<template>
  <el-button style="width: 100px" type="primary" v-print="printInfoObj">打印转诊单</el-button>

  <!-- 打印区域 -->
  <div class="print-container" id="printInfo">
    <h1 class="title">义乌市中医医院门诊中医外治转诊单</h1>

    <!-- 患者信息 -->
    <a-row class="patient-info">
      <a-col :span="8">
        <span class="label">患者姓名：</span>
        <span class="underline">
      <input
        type="text"
        class="borderless-input"
        placeholder="请输入"
        :value="form.patientName"
        style="width: 120px;"
      >
    </span>
      </a-col>
      <a-col :span="8">
        <span class="label">疾病诊断：</span>
        <span class="underline">
      <input
        type="text"
        class="borderless-input"
        placeholder="请输入"
        :value="form.diagnosis"
        style="width: 120px;"
      >
    </span>
      </a-col>
      <a-col :span="8">
        <span class="label">联系电话：</span>
        <span class="underline">
      <input
        type="text"
        class="borderless-input"
        placeholder="请输入"
        :value="form.phone"
        style="width: 120px;"
      >
    </span>
      </a-col>
    </a-row>

    <!-- 治疗项目表格 -->
    <!-- 治疗项目表格 - 修改后只保留一个表头 -->
    <table class="treatment-table">
      <thead>
      <tr>
        <th style="width: 30%; text-align: center;">病证</th>
        <th style="width: 70%;">治疗项目</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="treatment in treatments" :key="treatment.key">
        <td style="text-align: center;
 display: table-cell;
   vertical-align: middle;
">{{ treatment.disease }}</td>
        <td style="vertical-align: top;">
          <div class="treatment-grid">
            <div class="checkbox-group">
              <div class="checkbox-row">
                <div
                  class="checkbox-col"
                  v-for="(option, index) in treatment.options"
                  :key="option.value"
                >
                  <label class="custom-checkbox">
                    <input
                      ref="checkboxclassRef"
                      class="checkboxclass checked-border"
                      type="checkbox"
                      :value="option.value"
                      v-model="selectedOptions"
                       @change="handleCheckboxChange"
                    >
                    <span class="checkmark"></span>
                    <span class="checkbox-label">{{ option.label }}</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      </tbody>
    </table>


    <!-- 备注信息 -->
    <div class="remarks">
      <h3>备注：</h3>
      <p v-for="(note, index) in notes" :key="index">{{ note }}</p>
    </div>



    <div class="signature-area">
      <div style="text-align: right">
        <span class="label">转诊医生签名：</span>
        <span class="underline">
                 <input
                   type="text"
                   class="borderless-input"
                   placeholder="请输入"
                   :value="form.phone"
                   style="width: 150px;"
                 >
               </span>
      </div>
      <br>
      <div style="text-align: right;position: relative;left: 0px">
        <span class="label">日期：</span>
        <span class="underline">
                 <input
                   disabled
                   type="text"
                   class="borderless-input"
                   placeholder="请输入"
                   :value="currentDateTime"
                   style="width: 200px;"
                 >
               </span>
      </div>
    </div>


  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElCol as ACol, ElRow as ARow } from 'element-plus';

// 表单数据
const form = ref({
  patientName: '',
  diagnosis: '',
  phone: ''
});
// 当前日期
const currentDateTime = computed(() => {
  const now = new Date();
  return `${now.getFullYear()}年${padZero(now.getMonth() + 1)}月${padZero(now.getDate())}日${padZero(now.getHours())}时${padZero(now.getMinutes())}分${padZero(now.getSeconds())}秒`;
});
const selectedOptions = ref([]);
const checkboxclassRef = ref(null);

const handleCheckboxChange = () => {
  console.log('Checkbox changed:', selectedOptions.value);
};
// 补零函数（确保个位数显示为 01, 02...）
function padZero(num) {
  return num < 10 ? `0${num}` : num;
}
// 所有治疗项目数据（完整版）
const treatments = ref([
  {
    key: '1',
    disease: '痹证（膝、项、腰）颈肩腰背痛',
    options: [
      { value: '1-1', label: '中药熏药治疗' },
      { value: '1-2', label: '耳针(耳穴压豆)(双耳)' },
      { value: '1-3', label: '拔罐疗法(着罐)(3罐/次)' },
      { value: '1-4', label: '中药热奄包' },
      { value: '1-5', label: '中药蒸汽浴大于30min+中药' },
      { value: '1-6', label: '颈椎病推拿治疗' },
      { value: '1-7', label: '腰部疾病推拿治疗' },
      { value: '1-8', label: '肩周疾病推拿治疗' },
      { value: '1-9', label: '灸法（艾箱灸）' },
      { value: '1-10', label: '普通针刺（体针）（＞20个穴位）' },
      { value: '1-11', label: '低频脉冲电治疗' },
      { value: '1-12', label: '冲击波治疗' }
    ],
    selectedOptions: []
  },
  {
    key: '2',
    disease: '失眠',
    options: [
      { value: '2-1', label: '内科失眠推拿治疗' },
      { value: '2-2', label: '灸法（艾箱灸）' },
      { value: '2-3', label: '耳针(耳穴压豆)(双耳)' },
      { value: '2-4', label: '穴位贴敷治疗' },
      { value: '2-5', label: '刮痧治疗' },
      { value: '2-6', label: '普通针刺（体针）（＞20个穴位）' }
    ],
    selectedOptions: []
  },
  {
    key: '3',
    disease: '便秘',
    options: [
      { value: '3-1', label: '内科便秘推拿治疗' },
      { value: '3-2', label: '耳针(耳穴压豆)(双耳)' },
      { value: '3-3', label: '穴位贴敷治疗' },
      { value: '3-4', label: '普通针刺（体针）（＞20个穴位）' }
    ],
    selectedOptions: []
  },
  {
    key: '4',
    disease: '中风恢复期',
    options: [
      { value: '4-1', label: '运动疗法2次' },
      { value: '4-2', label: '单纯直流电治疗3部位' },
      { value: '4-3', label: '中药熏药治疗' },
      { value: '4-4', label: '药物罐（10穴）' },
      { value: '4-5', label: '普通针刺（体针）（＞20个穴位）' },
      { value: '4-6', label: '头皮针' }
    ],
    selectedOptions: []
  },
  {
    key: '5',
    disease: '骨折恢复期.韧带损伤术后运动损伤',
    options: [
      { value: '5-1', label: '运动疗法2次' },
      { value: '5-2', label: '单纯超声波治疗' },
      { value: '5-3', label: '普通针刺（体针）（＞20个穴位）' }
    ],
    selectedOptions: []
  },
  {
    key: '6',
    disease: '中风后遗症（肢体偏瘫康复）',
    options: [
      { value: '6-1', label: '中药熏药治疗' },
      { value: '6-2', label: '药物罐（10穴）' },
      { value: '6-3', label: '普通针刺（体针）（＞20个穴位）' },
      { value: '6-4', label: '头皮针' }
    ],
    selectedOptions: []
  },
  {
    key: '7',
    disease: '面瘫',
    options: [
      { value: '7-1', label: '穴位贴敷治疗' },
      { value: '7-2', label: '耳针(耳穴压豆)(双耳)' },
      { value: '7-3', label: '灸法（艾箱灸）' },
      { value: '7-4', label: '拔罐疗法(闪罐)(3罐/次)' },
      { value: '7-5', label: '中频脉冲电治疗' },
      { value: '7-6', label: '普通针刺（体针）（＞20个穴位）' }
    ],
    selectedOptions: []
  },
  {
    key: '8',
    disease: '呼吸系统',
    options: [
      { value: '8-1', label: '穴位贴敷治疗' },
      { value: '8-2', label: '耳针(耳穴压豆)(双耳)' },
      { value: '8-3', label: '灸法（艾箱灸）' },
      { value: '8-4', label: '埋针治疗(穴位埋线)(哮喘)' },
      { value: '8-5', label: '拔罐疗法(着罐)(3罐/次)' },
      { value: '8-6', label: '药物罐' },
      { value: '8-7', label: '刮痧治疗' }
    ],
    selectedOptions: []
  },
  {
    key: '9',
    disease: '消化系统（脾胃病）',
    options: [
      { value: '9-1', label: '穴位贴敷治疗' },
      { value: '9-2', label: '内科便秘推拿治疗' },
      { value: '9-3', label: '内科慢性腹泻推拿治疗' },
      { value: '9-4', label: '慢性胃病推拿治疗' },
      { value: '9-5', label: '耳针(耳穴压豆)(双耳)' },
      { value: '9-6', label: '中药热奄包' },
      { value: '9-7', label: '拔罐疗法(火罐)(3罐/次)' },
      { value: '9-8', label: '灸法（艾箱灸）' },
      { value: '9-9', label: '埋针治疗(穴位埋线)' },
      { value: '9-10', label: '普通针刺（体针）（＞20个穴位）' }
    ],
    selectedOptions: []
  },
  {
    key: '10',
    disease: '肥胖/减重',
    options: [
      { value: '10-1', label: '耳针(耳穴压豆)(双耳)' },
      { value: '10-2', label: '拔罐疗法(火罐)(3罐/次)' },
      { value: '10-3', label: '灸法（艾箱灸）' },
      { value: '10-4', label: '埋针治疗(穴位埋线)' },
      { value: '10-5', label: '普通针刺（体针）（＞20个穴位）' }
    ],
    selectedOptions: []
  },
  {
    key: '11',
    disease: '急性扁桃体炎',
    options: [
      { value: '11-1', label: '放血疗法' }
    ],
    selectedOptions: []
  },
  {
    key: '12',
    disease: '中暑',
    options: [
      { value: '12-1', label: '刮痧治疗' },
      { value: '12-2', label: '拔罐疗法(着罐)(3罐/次)' }
    ],
    selectedOptions: []
  },
  {
    key: '13',
    disease: '畏寒（阳虚体质）',
    options: [
      { value: '13-1', label: '灸法（艾箱灸）' },
      { value: '13-2', label: '督脉灸' }
    ],
    selectedOptions: []
  },
  {
    key: '14',
    disease: '偏头痛',
    options: [
      { value: '14-1', label: '灸法（艾箱灸）' },
      { value: '14-2', label: '刮痧治疗' },
      { value: '14-3', label: '普通针刺（体针）（＞20个穴位）' }
    ],
    selectedOptions: []
  },
  {
    key: '15',
    disease: '牙疼',
    options: [
      { value: '15-1', label: '微针针刺(腕踝针)' },
      { value: '15-2', label: '普通针刺（体针）（具体咨询医生）' }
    ],
    selectedOptions: []
  },
  {
    key: '16',
    disease: '痛经',
    options: [
      { value: '16-1', label: '穴位贴敷治疗' },
      { value: '16-2', label: '微针针刺(腕踝针)' },
      { value: '16-3', label: '普通针刺（体针）（＞20个穴位）' }
    ],
    selectedOptions: []
  },
  {
    key: '17',
    disease: '产后康复',
    options: [
      { value: '17-1', label: '中药蒸汽浴大于30min+中药' }
    ],
    selectedOptions: []
  },
  {
    key: '18',
    disease: '慢性盆腔炎',
    options: [
      { value: '18-1', label: '中药蒸汽浴大于30min+中药' }
    ],
    selectedOptions: []
  }
]);

// 备注内容
const notes = ref([
  '1.针刺后针刺部位出血后有肿块，按之疼痛，为皮下出血，并无大碍。小面积会自行吸收，可先冷敷，再用热毛巾热敷20分钟，两到三日即可褪去；',
  '2.针刺前如空腹或饱食后，可能会出现晕针现象，为避免此现象，针刺前请适量进食；',
  '3.针刺后如仍有酸、麻、胀、痛等皆为正常现象；',
  '4.拔罐时间过长会导致皮肤起水疱，若身体不耐受者，请在拔罐前告知，缩短拔罐时间；',
  '5.若有其他不适或疑问，可咨询医生；',
  '6.治疗地点：门诊三楼中医外治中心；',
  '7.联系人：姜凤慧 15057928116/548116；',
//

]);

// 打印配置
const printInfoObj = ref({
  id: "printInfo",
  popTitle: "", // 设置为空字符串取消页眉标题
  extraHead: '<style> @page { \n' +
    '        size: A4;\n' +
    '        margin: 15mm 10mm;\n' +
    '      }\n' +
    '      body { \n' +
    '        font-family: "SimSun", "宋体", serif !important;\n' +
    '      }</style>',
  preview: false,
  beforeOpenCallback(vue) {
    vue.printLoading = true;
  },
  openCallback(vue) {
    vue.printLoading = false;
  },
  style: '@page { margin: 0; }'
});
</script>

<style scoped>
.borderless-input:hover {
  border-bottom: 1px solid #ccc;
}

.print-container {
  padding: 15px;
  font-family: "SimSun", "宋体", serif;
  line-height: 1.5;
  font-size: 12px;
}

.title {
  text-align: center;
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: bold;
}

.patient-info, .signature-area {
  margin: 0 auto;
  width: 92%;
}

.label {
  font-weight: normal !important;
}

.underline {
  display: inline-block;
  min-width: 100px;
  border-bottom: 1px solid #000;
  margin-left: 5px;
}
.underline1 {
  display: inline-block;
  border-bottom: 1px solid #000;
  margin-left: 5px;
}

/* 表格样式 */
.treatment-table {
  width: 92%;
  margin: 15px auto;
  border-collapse: collapse;
  border: 1px solid black;
}

.treatment-table th,
.treatment-table td {
  border: 1px solid black;
  padding: 8px;
}

.treatment-table th {
  background-color: #f0f0f0;
  font-weight: bold;
  text-align: center;
}

.treatment-table td {
  vertical-align: top;
}

/* 复选框样式 */
.treatment-checkbox {
  margin-right: 10px;
  margin-bottom: 4px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.ant-checkbox {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  outline: none;
  cursor: pointer;
  margin-right: 8px;
}

.ant-checkbox-input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.ant-checkbox-inner {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  transition: all 0.3s;
}

.ant-checkbox-checked .ant-checkbox-inner {
  background-color: #fff;
  border-color: #1890ff;
}

.ant-checkbox-checked .ant-checkbox-inner::after {
  position: absolute;
  display: table;
  border: 2px solid #000;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) scale(1) translate(-50%, -50%);
  opacity: 1;
  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  content: ' ';
  left: 25%;
  top: 45%;
  width: 5.71428571px;
  height: 9.14285714px;
}

.borderless-input {
  border: none;
  background-color: transparent;
  outline: none;
  font-size: 14px;
  width: 220px;
}

.borderless-input:focus {
  box-shadow: none;
  border-color: transparent;
}

.treatment-grid {
  display: flex;
  flex-direction: column;
}

.checkbox-group {
  width: 100%;
}

.remarks {
  width: 92%;
  margin: 0 auto;
  font-size: 14px;
}

.remarks h3,p {
  margin: 0;
  font-size: 13px;
}

.contact-info {
  margin-top: 15px;
  text-align: right;
  font-size: 12px;
}

/* 修改复选框样式 */
.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  margin: -4px -8px;
}

.checkbox-col {
  width: 50%;
  padding: 4px 8px;
  box-sizing: border-box;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  background-color: #00bb99;
}
.checkboxclass {
  width: 18px;
  height: 18px;
  cursor: pointer;
  border: 2px solid #ccc; /* 默认边框 */
  border-radius: 4px;
  appearance: none;
  outline: none;
  transition: border-color 0.2s;
}

.checkboxclass:checked {
  background-color: white;
  border-color: black; /* 选中时边框变黑 */
}

.checked-border {
  border-color: black !important; /* 动态绑定选中样式 */
}

.checkboxclass:checked::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid black; /* 黑色内边框 */
  box-sizing: border-box;
  pointer-events: none;
}
.checkmark {
  position: absolute;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
}




.custom-checkbox:hover input ~ .checkmark {
  background-color: #f5f5f5;
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: #fff;
  border-color: #1890ff;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.custom-checkbox .checkmark:after {
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-label {
  margin-left: 5px;
}

/* 修改患者信息样式 */
.patient-info {
  margin: 10px auto;
  width: 92%;
  display: flex;
}

.patient-info .ant-col {
  display: flex;
  align-items: center;
}

.label {
  font-weight: bold;
  white-space: nowrap;
}

.underline {
  display: inline-block;
  min-width: auto;
  border-bottom: 1px solid #000;
  margin-left: 5px;
}
.underline1 {
  display: inline-block;
  min-width: 150px;
  border-bottom: 1px solid #000;
  margin-left: 5px;
}

.borderless-input {
  border: none;
  background-color: transparent;
  outline: none;
  font-size: 14px;
  width: 120px; /* 统一设置宽度 */
}/* 签名区样式 */
.signature-area {
  margin: 15px auto;
  width: 92%;
}

/* 新增日期区样式 */
.date-area {
  margin: 5px auto 15px auto;
  width: 92%;
  font-family: "SimSun", "宋体", serif;
}

.label {
  font-weight: normal; /* 取消加粗 */
  font-family: "SimSun", "宋体", serif;
}

.underline-date {
  min-width: 140px;
  display: inline-block;
  border-bottom: 1px solid #000;
  margin-left: 5px;
}



/* 打印时调整 */
@media print {
  .treatment-table thead {
    display: table-header-group !important;
  }

  /* 隐藏任何可能重复的表头 */
  .treatment-table thead ~ thead {
    display: none !important;
  }

  /* 表格线条设置为细线 */
  .treatment-table,
  .treatment-table th,
  .treatment-table td {
    border: 0.5pt solid #000 !important;
  }
}
</style>
